<template>
	<div style="position: relative;">

		<div class="one">

			<div class="header" @click="drawer_one = true">
				<span>查询SPU <i class="el-icon-search"></i></span>
			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="查找SPU" :visible.sync="drawer_one" :direction="direction">
				<el-input style="padding: 10px;" v-model="new_one" placeholder="请输入查找的SPU名称"></el-input>
				<el-button type="primary" v-on:click='select_spu()'
					style="display: block; width: 80%; margin: 10px auto;">
					查找SPU</el-button>
			</el-drawer>




			<div class="divContainer">

				<div class="item" v-for='spu in spu_select_list' v-on:click="ch_one(spu.id, spu.spu_name)"
					:class="[spu_id === spu.id?'active': '']" :id="spu.id" style="color: #0000FF;">
					<span>{{spu.spu_name}}</span>
				</div>

				<div class="item" v-for='spu in spu_list' v-on:click="ch_one(spu.id, spu.spu_name)"
					:class="[spu_id === spu.id?'active': '']" :id="spu.id">
					<span>{{spu.spu_name}}</span>
				</div>
				<div style="height: 200px;width: 100%;"></div>

			</div>


		</div>

		<div class="two">

			<div class="header" @click="drawer_two = true">
				<span>添加SPU属性 <i class="el-icon-circle-plus"></i></span>

			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="新增spu属性" :visible.sync="drawer_two" :direction="direction">
				<div style="margin-left: 20px; font-weight: 800;">spu名称:{{spu_name}}</div>
				<el-input style="padding: 10px;" v-model="attribute_key" placeholder="请输入新增属性键"></el-input>
				<el-input style="padding: 10px;" v-model="attribute_value" placeholder="请输入新增属性值"></el-input>
				<el-button type="primary" v-on:click='add_attribute()'
					style="display: block; width: 80%; margin: 10px auto;">
					保存属性</el-button>
			</el-drawer>




			<div class="divContainer">
				<div class="item" style="overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;" v-for='attribute in spu_attribute_list'
					@click="update_attribute(attribute.id, attribute.attribute_key, attribute.attribute_value)">
					<span>
						{{attribute.attribute_key}}: {{attribute.attribute_value}}
					</span>

					<i class="el-icon-delete-solid" @click="del_spu_attribute(attribute.id)" @click.stop></i>
				</div>
				<div style="height: 200px;width: 100%;"></div>
			</div>




		</div>


		<!-- 修改属性 -->
		<el-drawer size="80%" title="修改spu属性" :visible.sync="drawer_thr" :direction="direction">
			<div style="margin-left: 20px; font-weight: 800;color: red;">spu名称:{{spu_name}},修改属性</div>


			<div style="margin-left: 20px; margin-top: 10px;">属性键：</div>
			<el-input style="padding: 10px;" v-model="attribute_key" placeholder="请输入新增属性键"></el-input>
			<div style="margin-left: 20px;">属性值：</div>
			<el-input style="padding: 10px;" v-model="attribute_value" placeholder="请输入新增属性值"></el-input>
			<el-button type="primary" v-on:click='update_attribute_()'
				style="display: block; width: 80%; margin: 10px auto;">
				修改属性</el-button>
		</el-drawer>

		<DelUpdate :spu_id='spu_id' :can_del_id='can_del_id' @deleteSpuSuccess="deleteSpuSuccess"
			@updateSpuSuccess="updateSpuSuccess">
		</DelUpdate>




	</div>
</template>

<script>
	import DelUpdate from './del_update.vue'
	import {
		select_all_spu_url,
		select_spu_id_attribute_url,
		add_spu_attribute_url,
		del_spu_attribute_url,
		update_spu_attribute_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {
			DelUpdate
		},
		props: {},
		data() {
			return {
				spu_list: [],
				spu_select_list: [],
				spu_attribute_list: [],
				spu_id: '',
				can_del_id: '',
				spu_name: '',
				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				drawer_thr: false,
				new_one: '',
				attribute_key: '',
				attribute_value: '',
				attribute_id: '',

			}
		},
		methods: {

			update_attribute(id, key, val) {

				// console.log(id)
				this.attribute_id = id
				this.attribute_key = key
				this.attribute_value = val
				this.drawer_thr = true

			},

			update_attribute_() {

				this.$axios({
					method: 'POST',
					url: update_spu_attribute_url,

					data: this.qs.stringify({ //这里是发送给后台的数据
						spu_attribute_id: this.attribute_id,
						spu_attribute_key: this.attribute_key,
						spu_attribute_value: this.attribute_value,
					})

				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.$message({
						message: '属性更新成功',
						type: 'success'
					})

					this.get_spu_attribute()
					this.drawer_thr = false

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			updateSpuSuccess(data) {
				console.log(data)
				this.get_all_spu()
				//更新spu_select_list
				// this.spu_select_list = []
				// for (var i = 0; i < this.spu_list.length; i++) {

				// 	if (this.spu_list[i]['spu_name'].toLowerCase().indexOf(this.new_one.toLowerCase()) != -1) {
				// 		this.spu_select_list.push(this.spu_list[i])
				// 	}
				// }
			},

			deleteSpuSuccess(data) {
				// console.log(data)
				this.get_all_spu()
			},

			add_attribute() {

				if (this.spu_id === '') {
					this.$message({
						message: '请选择一个SPU' + '!!!',
						type: 'error'
					})

					return
				}



				this.$axios({
					method: 'GET',
					url: add_spu_attribute_url,
					params: {
						spu_id: this.spu_id,
						attribute_key: this.attribute_key,
						attribute_value: this.attribute_value,
					}
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.$message({
						message: '属性添加成功',
						type: 'success'
					})
					this.get_spu_attribute()
					this.drawer_two = false

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})


			},

			del_spu_attribute(attribute_id) {

				this.attribute_id = attribute_id

				this.$axios({
					method: 'POST',
					url: del_spu_attribute_url,

					data: this.qs.stringify({ //这里是发送给后台的数据
						spu_attribute_id: attribute_id,
					})

				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.$message({
						message: '属性删除成功',
						type: 'success'
					})

					this.get_spu_attribute()

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			ch_one(spu_id, spu_name) {

				this.spu_id = spu_id
				this.spu_name = spu_name

				this.$axios({
					method: 'GET',
					url: select_spu_id_attribute_url,
					params: {
						spu_id: spu_id
					}
				}).then((response) => { //这里使用了ES6的语法

					this.spu_attribute_list = response.data.resultBody.reverse()
					// console.log(this.spu_attribute_list)
					if (this.spu_attribute_list.length == 0) {
						this.can_del_id = spu_id
					} else {
						this.can_del_id = ''
					}
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},


			get_spu_attribute() {

				this.$axios({
					method: 'GET',
					url: select_spu_id_attribute_url,
					params: {
						spu_id: this.spu_id
					}
				}).then((response) => { //这里使用了ES6的语法

					this.spu_attribute_list = response.data.resultBody.reverse()

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			get_all_spu() {

				this.$axios({
					method: 'GET',
					url: select_all_spu_url,
				}).then((response) => { //这里使用了ES6的语法

					this.spu_list = response.data.resultBody.reverse()
					if (this.new_one == '') {
						return
					}
					this.spu_select_list = []
					for (var i = 0; i < this.spu_list.length; i++) {

						if (this.spu_list[i]['spu_name'].toLowerCase().indexOf(this.new_one.toLowerCase()) != -1) {
							this.spu_select_list.push(this.spu_list[i])
						}
					}
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},

			select_spu() {

				if (this.new_one === '') {
					this.$message({
						message: '请输入要查询的spu名称' + '!!!',
						type: 'error'
					})

					return

				}

				this.spu_select_list = []
				for (var i = 0; i < this.spu_list.length; i++) {

					if (this.spu_list[i]['spu_name'].toLowerCase().indexOf(this.new_one.toLowerCase()) != -1) {
						this.spu_select_list.push(this.spu_list[i])
					}


				}

				this.drawer_one = false
			}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			this.get_all_spu()
		},
	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}


	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}

	.item {
		position: relative;
		// height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;
		

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}



	.divContainer {
		overflow: auto;
		// height: 300px;
		height: 480px;
	}

	.divContainer::-webkit-scrollbar {
		border-width: 1px;
	}
</style>
